<script setup lang="ts">
// 奖金构成
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import EchartPie from '@/components/Echart/pie/index.vue'
import { useDealerDataStore } from '@/stores/module/dealerData'
import { isMobile } from '@/Utils/global'
import { headersStore } from '@/stores/apiHeader'
const headerStore = headersStore()
const { language_id } = storeToRefs(headerStore)

const dealerDataStore = useDealerDataStore() // 创建store实例
const { dealerPriceDetailPie } = storeToRefs(dealerDataStore)

const top = isMobile() ? '37%' : '32%'

const options = reactive({
  name: 'dealerPriceDetailPie',
  position: 'bottom',
  legend: {
    top: top,
    suffixHidden: true,
    left: language_id.value == 'zh-cn' ? '32%' : '29%',
    rich: {
      a: {
        width: language_id.value == 'zh-cn' ? 90 : 120,
      },
      b: {
        width: 95,
      },
      c: {
        width: 30,
      },
    },
  },
  series: {
    radius: ['23%', '40%'],
    center: [language_id.value == 'zh-cn' ? '17%' : '14%', '50%'],
  },
  data: dealerPriceDetailPie.value.info,
})
watch(
  () => dealerPriceDetailPie.value,
  () => {
    // 重新赋值options.data
    options.data.splice(
      0,
      options.data.length,
      ...dealerPriceDetailPie.value.info
    )
  },
  { deep: true }
)
</script>
<template>
  <el-carousel-item>
    <card-box style="height: 400px">
      <template v-slot:title>
        <h1>{{ dealerPriceDetailPie.title || '' }}</h1>
      </template>
      <EchartPie
        :chart-data="options"
        v-if="dealerPriceDetailPie.info?.length"
      />
      <div class="NoPlanYet-box" v-else>
        <p>{{ $t('bi_common_nodata' )}}</p>
      </div>
    </card-box>
  </el-carousel-item>
</template>
<style lang="scss" scoped>
.NoPlanYet-box {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/NoPlanYet-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183px 165px;

  font-size: 16px;
  color: #00f6ff;
  p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
